<template>
	<!-- <view class="my-location">
		<up-cell title="我的位置" arrow-direction="down">
			<template #title>
				<view class="my-location-title">
					我的位置:
				</view>
			</template>
			<template #icon>
				<up-icon size="22" name="map-fill" color="#ff4b2b"></up-icon>
			</template>
			<template #right-icon>
				<up-icon size="26" name="reload"></up-icon>
			</template>
		</up-cell>
	</view> -->
	<view class="my-car">
		<!-- TODO 获取车辆清单 -->
		<view class="my-car-title">
			我的车辆 <text>{{car.Time}}</text>
		</view>
		<view class="my-car-item">
			<image src="/static/park/car-round.png" mode=""></image>
			<view class="my-car-name">
				{{car.PlateNum}}
			</view>
		</view>

		<view class="my-car-park" @click="showData">
			<image src="/static/park/parking.png" mode="widthFix"></image>
			<view class="my-car-park-text">
				停车记录
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import parkApi from '../../api/parking'
	const car = ref({
		Time: "",
		PlateNum: "暂无车辆信息",
		ParkId: ""
	});
	const location = ref("")
	onMounted(() => {
		// uni.getLocation({
		// 	type: 'wgs84',
		// 	success: function(res) {
		// 		console.log(res);
		// 		console.log('当前位置的经度：' + res.longitude);
		// 		console.log('当前位置的纬度：' + res.latitude);
		// 	},
		// 	fail: function(err) {
		// 		console.log(err)
		// 	}
		// });
		getCars();
	});
	const getCars = async () => {
		const app = JSON.parse(uni.getStorageSync("user"));
		const res = await parkApi.getCars({
			RoomIds: [app.DefaultRoomId]
		});
		if (res.Data) {
			car.value = res.Data[0];
		}
	}
	const showData = () => {
		if (!car.value.ParkId) {
			return;
		}
		uni.navigateTo({
			url: './detail?car=' + car.value.PlateNum
		})
	}
</script>

<style lang="scss" scoped>
	.my-location {
		background-color: #fff;
		margin: 40rpx 0;

		.my-location-title {
			margin-left: 10rpx;
			font-size: 28rpx;
		}
	}

	.my-car {
		background-color: #fff;
		padding: 40rpx;

		image {
			width: 100rpx;
			height: 100rpx;
		}

		.my-car-title {
			font-size: 28rpx;
			font-weight: bold;

			text {
				color: #aaa;
				font-size: 24rpx;
				font-weight: normal;
			}
		}

		.my-car-item {
			padding: 40rpx 0;
			width: 200rpx;
			text-align: center;
			font-size: 24rpx;

			.my-car-name {
				margin-top: 10rpx;
			}
		}

		.my-car-park {
			border-top: 1rpx solid #eee;
			padding: 40rpx 0;
			text-align: center;

			image {
				width: 66rpx;
			}

			.my-car-park-text {
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>